<template>
  <el-container>
    <!-- Header -->
    <el-header
      style="background-color: #ffffff; margin: 10px 0px 20px 0px; height: 70px"
    >
      <el-row>
        <el-col :span="3">
          <el-image :src="logoUrl" style="height: 70px"></el-image>
        </el-col>
        <el-col :span="19" style="marginleft: 15px">
          <h1 style="text-align: content; margintop: 24px ;">客户关系管理系统</h1>
        </el-col>
        <!-- 退出按钮 -->
        <el-col :span="1">
          <el-button
            icon="el-icon-switch-button"
            @click="logOut()"
            circle
            style="margintop: 20px"
          ></el-button>
        </el-col>
      </el-row>
    </el-header>

    <el-container>
      <!-- 侧边栏 -->
      <el-aside class="el-aside" width="16%">
        <!-- 基本信息 -->
        <el-row style="height: 70px">
          <!-- 头像 -->
          <el-col :span="8" :offset="4">
            <div class="portrait">
              <el-avatar :size="60" :src="circleUrl"></el-avatar>
            </div>
          </el-col>

          <!-- 用户名+修改密码 -->
          <el-col :span="10" :offset="1">
            <el-row style="height: 40px">
              <div
                style="
                  font-size: 15px;
                  font-weight: bold;
                  text-align: left;
                  color: #000000;
                  margin: 10px 0px 0px 3px;
                "
              >
                {{ user_name }}
              </div>
            </el-row>

            <el-row style="height: 30px">
              <a
                style="
                  display: block;
                  font-size: 12px;
                  text-align: left;
                  color: #0020f3;
                  margin: 0px 0px 0px 3px;
                "
                @click="changePwd()"
                >修改密码</a
              >
            </el-row>
          </el-col>
        </el-row>

        <!-- 导航栏 -->
        <el-menu
          v-if="menuList[0]"
          :default-active="menuList[0].children[0].per_id+''"
          active-text-color="#4682B4"
          class="el-menu-vertical-demo"
          style="margintop: 10px"
          unique-opened
        >
          <!-- 子菜单1 -->
          <el-submenu
            :index="menu.per_id + ''"
            v-for="menu of menuList"
            :key="menu.per_id"
          >
            <!-- 一级菜单标题 -->
            <template slot="title">
              <i :class="menu.per_icon"></i>
              <span>{{ menu.per_name }}</span>
            </template>
            <!-- 一级菜单对应的二级菜单 -->
            <el-menu-item
              :index="subMenu.per_id + ''"
              v-for="subMenu of menu.children"
              :key="subMenu.per_id"
              @click="handlerRoute(subMenu)"
            >
            <i :class="subMenu.per_icon"></i>
              <span>{{ subMenu.per_name }}</span>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>

      <!-- RouterView -->
      <el-main>
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>

<style scoped>
.el-aside {
  display: block;
  position: relative;
  overflow-y: scroll;
}
</style>


<script>
export default {
  data() {
    return {
      logoUrl: require("../assets/logoPic.jpg"),
      circleUrl: require("../assets/circlePic.jpg"),
      user_name: "",
      menuList: [],
      user_remark:''
    };
  },

  methods: {
    // 退出登录
    logOut() {
      //console.log("安全退出");
      sessionStorage.clear();
      this.$router.push("/");
    },
    //修改密码
    changePwd() {
      //alert("gogogo");
      this.$router.push("/UpdPassword");
    },
    //
    handlerRoute(subMenu){
        //根据数据库中权限路径信息更改路由地址
        this.$router.push(subMenu.per_href);
    }
  },
  mounted() {
    //从session中获取当前登录者的role_id
    let role_id = sessionStorage.getItem("role_id");
    // 从session中获取当前登录者的user_name
    this.user_name = sessionStorage.getItem("user_name");
    // 发送请求获取数据挂载到导航菜单中，需要将登录成功的用户名带的服务器
    this.$axios
      .get("/menus/" + role_id)
      .then((resp) => {
        this.menuList = resp.data.data;//响应回来的集合赋值给menuList
      })
      .catch((error) => {});
  },
};
</script>
